import React, { Component } from 'react'
import { Card, Spin, Icon, Alert } from 'antd'
import './index.less'

class Loadings extends Component{
    render() {
        const icon = <Icon type="loading"/> 
        return(
            <div>
                <Card className="card-wrap" title="Spin用法">
                    <Spin size="small" style={{marginRight: '10px'}}/>
                    <Spin style={{marginRight: '10px'}}/>
                    <Spin size="large" style={{marginRight: '10px'}}/>
                    <Spin indicator={icon} style={{marginRight: '10px'}}/>
                </Card>

                <Card className="card-wrap" title="内容Loading">
                    <Alert message="React"
                        description="欢迎来到React"
                        type="info"
                        style={{marginBottom: '10px'}}
                        />
                    
                    <Spin  wrapperClassName="spin-wrap">
                        <Alert message="React"
                            description="欢迎来到React"
                            type="success"
                            />
                    </Spin>

                    <Spin tip="加载中..." spinning={true} wrapperClassName="spin-wrap">
                        <Alert message="React"
                            description="欢迎来到React"
                            type="info"
                            />
                    </Spin>

                    <Spin tip="加载中..."
                        indicator={icon}
                        spinning={true} 
                        wrapperClassName="spin-wrap">
                        <Alert message="React"
                            description="欢迎来到React"
                            type="error"
                            />
                    </Spin>
                </Card>

            </div>
        )
    }
}

export default Loadings